<template>
  <div class="center-box class-box dl-row-sb start mar-top mar-bottom">
    <div class="left main-box dl-sticky">
      <div v-for="(item, index) in tabBars" :key="index" class="w-[100%] py-3 px-10 cursor-pointer"
           :class="tabIndex === index ? 'bg-blue-500 text-white' : ''" @click="handleTabClick(item, index)">
        <span>{{ item.name }}</span>
      </div>
    </div>
    <div class="right">
      <template v-if="tabIndex === 0" v-loading="loading">
	  <!-- 课程-->
        <class-list></class-list>
      </template>
	  <!-- 自我检测-->
      <template v-if="tabIndex === 1">
        <!-- <meet-professor></meet-professor> -->
		<self-check></self-check>
      </template>
	   <!-- 学习历史-->
      <template v-if="tabIndex === 2">
        <course-learn-history></course-learn-history>
      </template>
	  <!-- 我的成绩-->
	  <template v-if="tabIndex === 3">
	    <course-collect></course-collect>
	  </template>
    </div>
  </div>
</template>

<script>
	import classList from "./classComponents/classList.vue"
	import courseLearnHistory from './classComponents/courseLearnHistory.vue'
	import selfCheck from './components/selfCheck.vue'
	import courseCollect from './classComponents/courseCollect.vue'
	export default {
	  components: {classList,selfCheck,courseLearnHistory,courseCollect},
	  data() {
		return {
		  showType:false,
		  keywords: '',
		  normalIndex: 0,
		  customizeIndex: 0, // 定制课
		  questionIndex: 0, // 题库
		  tabIndex: 0,
		  activeName: 'first',
		  recommendIndex: 0,
		  recommendIndex2: 0,
		  classTypeList:[],
		  classTypeChildrenList:[],
		  calssChildrenIndex:0,
		  tabBars: [
			{
			  name: '课程学习',
			},
			{
			  name: '自我检测',
			},
			{
			  name: '学习历史',
			},
			{
			  name: '收藏',
			},
		  ]
		}
	  },
	  created() {
	  	this.$nextTick(() => {
			
	  	})
	  },
	  methods: {
		handleTabClick(row, index) {
		  this.tabs = row.tabs
		  this.activeName = 'all'
		  this.tabIndex = index
		  this.cureentName = row.name
		},
		handleClick(tab, event) {
		  console.log(tab, event);
		},
		recommendChange(index) {
		  this.recommendIndex = index
		},
		showDetails(type){
			//if(this.classTypeList.length>20){
				if(type){
					this.showType=true
				}else{
					this.showType=false
				}
		//	}
					
		}
	  },
	}
</script>

<style lang="scss" scoped>
	.class-box {
	  .left {
		width: 230px;
		padding: 25px 0;
		.bg-blue-500{
		  background: #0068B6;
		}
		.py-3{
		  margin-bottom: 5px;
		}
		span{
		  font-size: 16px;
		  font-weight: 400;
		  color: #545C63;
		}
		.text-white span{
		  color: #ffffff;
		}
	  }
		.right{
		width: 1110px;
	  }
	}
</style>